<template>
	<view>
		<view class="top-search-view" :style="{height:'156rpx'}">
			<view class="px10 py10">
				<u-search placeholder="请输入合同标题或合同参与方信息" v-model="productName" searchIconSize="44" bgColor="#F2F2F2"
					shape="square" height="66rpx" :showAction="true" :focus="true"
					@custom="tapSearch" @search="tapSearch"></u-search>
			</view>
			<me-tabs v-model="current" :tabs="tabs" @change="tabChanged"></me-tabs>
		</view>

		<mescroll-body ref="mescrollRef" top="194rpx" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="px10 mt10" v-for="(item, index) in pageList" :key="index" @tap="pushDetail(item)">
				<view class="bg-fff br5 dis-flex-column px10 py10">
					<view class="dis-flex flex-align-center flex-between">
						<view class="fs15 fwb c-333">合同编号[{{item.htnum}}]</view>
						<view class="fs14" :style="{color:statusColor[item.status]}">
							{{ status[item.status] }}
						</view>
					</view>
					<view class="c-666 fs14 mt5">发件方:{{item.partyA}}</view>
					<view class="c-666 fs14 mt5">收件方:{{item.partyB}}</view>
				</view>
			</view>
		</mescroll-body>

	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {mapState} from 'vuex';
	export default {
		computed:{
			...mapState(['refreshOrder']),
		},
		mixins: [MescrollMixin],
		data() {
			return {
				productName: '',
				pageList: [],
				mHeight:0,
				
				// tabs: ['全部','待生成', '待签约', '已签约','已过期','已作废'],
				tabs: ['待签约', '已签约','发起的'],
				current: 0 ,// 当前tab下标
				
				status: ['', '待生成', '待签约', '已签约', '已过期', '已作废'],
				statusColor: ['', '#f29100', '#2b85e4', '#19be6b', '#696266', '#fa3534'],
			}
		},
		
		watch:{
			refreshOrder(val,old){
				this.pageList = [];
				this.mescroll.resetUpScroll();
			}
		},
		
		onLoad(option) {
			this.current = parseInt(option.index) || 0;
		},

		methods: {
			
			tabChanged(index){
				this.current = index;
				this.pageList = [];
				this.mescroll.resetUpScroll();
			},
			
			downCallback() {
				setTimeout(() => {
					this.pageList = [];
					this.mescroll.resetUpScroll();
				}, 1000);
			},

			upCallback(page) {
				var parDict = {
					status: this.current == 0 ? 2:(this.current == 1?3:undefined),
					keyword:this.productName
				}
				this.$http.post(this.current == 2?this.$config.UrlSendContract:this.$config.UrlGetContract, parDict, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					let datalist = res?.data?.data || []
					if (page.num == 1) this.pageList = [];
					this.pageList.push.apply(this.pageList, datalist);
					this.mescroll.endBySize(datalist.length, res?.data?.total);
				}).catch((err) => {
					this.mescroll.endErr();
				})
			},
			
			tapSearch() {
				this.pageList = [];
				this.mescroll.resetUpScroll(); 
			},
			
			// 跳转详细
			pushDetail(item) {
				this.$api.openWindow(`/pages/center/contractDetail?id=${item.id}`);
			}
		}
	}
</script>

<style>
	
	.top-search-view {
		position: fixed;
		left: 0;
		background-color: #fff;
		z-index: 999;
		width: 100%;
	}
	
</style>
